<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* 分页器样式
           width: 6 * 40 + 90 *2 + 7 * 10 = 490;
           详细使用请参照 /homes/search_videos
        */
        #pagination{
            width: 490px;
            height: auto;
            overflow: hidden;
            margin: 0 auto;
        }
        #pagination .fl{
            float: left;
        }
        #pagination li{
            list-style: none;
        }
        #pagination .prepage{
            width: 90px;
            height: 40px;
            background: #F5F5F5;
            border-radius: 5px;
            text-align: center;
            line-height: 40px;
            margin-right: 5px;
            overflow: hidden;
        }
        #pagination .prepage a{
            display: block;
            width: 100%;
            height: 100%;
            text-decoration: none;
            font-size: 16px;
            font-weight: 400;
            color: #666666;
        }
        #pagination .nextpage{
            width: 90px;
            height: 40px;
            background: #F5F5F5;
            border-radius: 5px;
            text-align: center;
            line-height: 40px;
            margin-left: 5px;
            overflow: hidden;
        }
        #pagination .nextpage a{
            display: block;
            width: 100%;
            height: 100%;
            text-decoration: none;
            font-size: 16px;
            font-weight: 400;
            color: #666666;
        }
        #pagination .page-item{
            width: 40px;
            height: 40px;
            background: #F5F5F5;
            border-radius: 5px;
            text-align: center;
            line-height: 40px;
            margin: 0 5px;
            overflow: hidden;
        }
        #pagination .page-item a{
            display: block;
            width: 100%;
            height: 100%;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #666666;
            text-decoration: none;
        }
        #pagination .active{
            background-color: #4C9AFE;
        }
        #pagination .active a{
            color: #fff;
            font-weight: bold;
        }
        #pagination .prepage:hover,#pagination .page-item:hover,#pagination .nextpage:hover{
            background-color: #4C9AFE;
        }
        #pagination .prepage:hover a,#pagination .page-item:hover a,#pagination .nextpage:hover a{
            color: #fff;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <!-- 分页 -->
    <ul id="pagination">
        <li class="prepage fl"><a href="">上一页</a></li>
        <li class="page-item fl active"><a href="">1</a></li>
        <li class="page-item fl"><a href="">2</a></li>
        <li class="page-item fl"><a href="">3</a></li>
        <li class="page-item fl"><a href="">4</a></li>
        <li class="page-item fl"><a href="">...</a></li>
        <li class="page-item fl"><a href="">200</a></li>
        <li class="nextpage fl"><a href="">下一页</a></li>
    </ul>
</body>
</html>